<template>
	<view class="withdrawal flex-box">
		<view class="content">
			<view class="mode-title flex-box">
				<text>提现方式</text>
				<image v-if="status==1" :src="newImgUrl+'/ico/icon-alipay.png'" class="mode-alipay"></image>
				<image v-if="status==2" :src="newImgUrl+'/ico/icon-bank.png'" class="mode-bank"></image>
				<view class="box-1 tips-text">48小时内到账</view>
			</view>
			<view class="item-title">
				提现金额
			</view>
			<view class="flex-box wallet-num">
				<text>￥</text>
				<input type="number" v-model="amount" placeholder="0.00" class="box-1 input_num" @input="amountFun" />
				<text class="wallet-text" @tap="allWithdrawalFun">全部提现</text>
			</view>
			<view class="item-title">
				当前魅力值{{info.points || 0}}，可兑换{{info.points || 0}}元人民
			</view>
			<view class="item-tips flex-box">
				<u-icon name="star-fill" size="10" color="red"></u-icon> 提现将收取{{info.withdraw_handlefeerate||0}}%的手续费
			</view>
			<view class="collection-title">
				收款账号
			</view>
			<input type="text" :class="[info.account?' val':'','input-box flex-box']" v-model="info.account"
				placeholder="请输入收款账号" @blur="blurFun()"/>
			<block v-if="status==2">
				<view class="collection-title">
					收款银行
				</view>
				<input type="text" :class="[info.account_bank?' val':'','input-box flex-box']" v-model="info.account_bank"  placeholder="请输入收款银行" />
			</block>
			<view class="collection-title">
				收款户名
			</view>
			<input type="text" :class="[info.name?' val':'','input-box flex-box']" v-model="info.name" :placeholder="status==1?'请输入支付宝户名':'请输入开户姓名'"/>
		</view>
		<view class="flex-box agreement">
			<u-checkbox-group>
				<u-checkbox shape="circle" v-model="isAgree" labelSize="24rpx" activeColor="#76D1FF" inactiveColor="#76D1FF" label="我已阅读并同意" @change="agreeFun"></u-checkbox>
			</u-checkbox-group>
			<text class="sign" @tap="jumpUrl(config().domain+'/index/user_withdrawal_agreement')">《伊姿漾用户余额提现规则及协议》</text>
<!--			<text class="sign" @tap="jumpUrl('https://lrh.svkeji.cn/index/custom_service')">《平台服务协议》</text>-->
		</view>
		<view class="confirm-btn" @tap="comfirmFun()">
			确认
		</view>
	</view>
</template>

<script>
	import debounce from "@/utils/debounce.js"
	export default {
		data() {
			return {
				status: 1, //1支付宝，2银行卡
				isAgree: false,
				newImgUrl: '',
				amount: '',
				type: 0,
				info: {
					name: '',
					account: '',
					account_bank: '',
					points: 0,
					withdraw_handlefeerate:0
				},
				falg:true,
			}
		},
		onLoad(option) {
			this.newImgUrl = this.$c.newImgUrl
			if (option.status) {
				this.status = option.status
			}
			this.getData()
		},
		methods: {
      config(){
        return this.$c;
      },
			getData() {
				uni.showLoading({
					title: "加载中……"
				})
				this.$u.api.withdrawLoadAccount({
					type:this.status==2?0:1
				})
					.then(res => {
						uni.hideLoading()
						if (res.status) {
							this.info.name = res.msg.name??''
							this.info.account = res.msg.account??''
							this.info.account_bank = res.msg.account_bank??''
							this.info.points = res.msg.points??0
							this.info.withdraw_handlefeerate = res.msg.withdraw_handlefeerate
						}
					})
					.catch(err => {
						uni.hideLoading()
						this.$u.toast('网络失败，请稍后再试！')
					})
			},
			//勾选协议
			agreeFun() {
				this.isAgree = !this.isAgree
			},
			//全部提现
			allWithdrawalFun() {
				this.amount = this.info.points
			},
			//银行卡查询
			blurFun(){
				if(this.status==2 && this.info.account){
					uni.showLoading({
						title:'正在查询，请稍后'
					})
					this.$u.api.withdrawBankType({
						card_sn:this.info.account
					})
					.then(res=>{
						uni.hideLoading()
						if(res.status){
							this.info.account_bank = res.msg.bank_text
						}else{
							this.$u.toast(res.msg)
						}
					})
					.catch(err=>{
						uni.hideLoading()
						this.$u.toast('网络失败，请稍后再试！')
					})
				}
			},
			//输入金额方法
			amountFun: debounce.debounce(function(e) {
				if (parseFloat(e.detail.value) > this.info.points) {
					this.$nextTick(() => {
						this.amount = this.info.points
					})
					return
				}
				if (parseFloat(e.detail.value) < 0) {
					this.$nextTick(() => {
						this.amount = 1
					})
				}
			}, 600),
			//确认提现
			comfirmFun() {
				if(!this.falg){
					this.$u.toast('请勿重复点击')
					return 
				}
				if (parseFloat(this.amount) > parseFloat(this.info.points)) {
					this.$u.toast('请输入正确的提现金额！')
					return
				}
				if (!this.info.account) {
					this.$u.toast('请输入收款账号!')
					return
				}
				if (this.status == 2 && !this.info.account_bank) {
					this.$u.toast('请输入收款银行!')
					return
				}
				if (!this.info.name) {
					this.$u.toast('请输入收款户名!')
					return
				}
				if (!this.isAgree) {
					this.$u.toast('请先阅读并同意协议!')
					return
				}
				uni.showLoading({
					title: "申请中……"
				})
				this.falg = false
				let data = {
					amount:this.amount,
					type:this.status==2?0:1,
					name:this.info.name,
					account:this.info.account,
					account_bank:this.info.account_bank??''
				}
				this.$u.api.withdraw(data)
					.then(res => {
						uni.hideLoading()
						this.falg = true
						if (res.status) {
							uni.redirectTo({
								url: './achieve'
							})
						} else {
							this.$u.toast(res.msg)
						}
					})
					.catch(err => {
						this.falg = true
						uni.hideLoading()
						this.$u.toast('网络失败，请稍后再试！')
					})

			},
			jumpUrl(url){
				uni.navigateTo({
					url: "/pages/web-view/web-view?url=" + JSON.stringify(url)
				})
			}
		},
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
		font-size: 32rpx;
		color: #666666;
	}
	.item-tips{
		padding-bottom:20rpx;
		font-size:28rpx;
	}

	.withdrawal {
		flex-direction: column;
		height: 100vh;
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;

		.agreement {
			font-size: 24rpx;
			justify-content: center;
			padding: 20rpx 0;

			.sign {
				color: #76D1FF;
			}
		}

		.confirm-btn {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
			margin: 0 auto 20rpx;
			font-weight: bold;
			background: linear-gradient(90deg, #AE87D8 0%, #AD87D8 100%);
			border-radius: 40rpx;
		}
	}

	.content {
		flex: 1;
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 26rpx;

		.item-title {
			padding: 34rpx 0;
		}

		.mode-title {
			padding-bottom: 40rpx;

			.mode-bank {
				width: 190rpx;
				height: 53rpx;
				display: block;
				margin-left: 30rpx;
			}

			.mode-alipay {
				width: 149rpx;
				height: 51rpx;
				display: block;
				margin-left: 30rpx;
			}

			.tips-text {
				font-size: 24rpx;
				text-align: right;
			}
		}

		.wallet-num {
			color: #333333;
			font-size: 40rpx;
			font-weight: bold;
			border-bottom: 1px solid #CCCCCC;
			padding: 10rpx 0;
			align-items: flex-end;

			.input_num {
				font-size: 90rpx;
				height: 100rpx;
			}

			.wallet-text {
				font-weight: normal;
				color: #52CC8B;
				font-size: 32rpx;

			}
		}

		.input-box {
			margin: 20rpx 0 30rpx;
			height: 80rpx;
			width: 100%;
			box-sizing: border-box;
			line-height: 80rpx;
			border-radius: 10rpx;
			border-bottom: 1px solid #E6E6E6;
		}

		.val {
			background: #E6E6E6;
			padding-left: 30rpx;

			&:before {
				display: inline-block;
				content: '';
				margin-right: 20rpx;
				width: 1px;
				height: 30rpx;
				background: #CCCCCC;
			}
		}
	}
</style>